<template>
  <div class="p-d">
    <el-row class="p-t p-l p-r b-f m-b">
      <el-tabs class="tab-lists"
        v-model="activeName"
        @tab-click="handleClick">
        <el-tab-pane label="指南项目"
          name="first"></el-tab-pane>
        <el-tab-pane label="建议书汇总"
          name="second"></el-tab-pane>
      </el-tabs>
    </el-row>
    <el-row v-if="activeName == 'first'">
      <ProjectList @clickData="clickData" />
    </el-row>
    <el-row v-if="activeName == 'second'">
      <DataList :activeProject="activeProject"
        :activeName="activeName" />
    </el-row>
  </div>
</template>

<script>
import ProjectList from './common/projectList.vue'
import DataList from './common/dataList.vue'
export default {
  components: { ProjectList, DataList },
  data() {
    return {
      activeName: 'first',
      activeProject: null
    }
  },
  computed: {
    activeTab() {
      return this.$route.query.active
    }
  },
  watch: {},
  created() {
    if (this.activeTab) {
      console.log('[ this.activeTab ] >', this.activeTab)
      this.activeName = this.activeTab
    }
  },
  methods: {
    handleClick() {
      this.$router.push({
        path: this.$route.path,
        query: { active: this.activeName }
      })
    },
    clickData(row) {
      this.activeName = 'second'
      this.$router.push({
        path: this.$route.path,
        query: { active: this.activeName }
      })
      this.activeProject = row
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep.tab-lists {
  .el-tabs__header {
    margin: 0;
  }
}
</style>